<!-- 点击加号添加流程组件 -->
<template>
    <div class="next-arrow-add" @click="e => e.stopPropagation()">
      <div class="next-branch-icon" v-if="beforeNode.getNodeType()==FlowNodeType.ROUTE">
       <img :src="(beforeNode as any).getRouteType()==FlowNodeType.TOLERATE?brfznextPng:branchPng" alt="">
      </div>

        <a-trigger trigger="click" show-arrow>
            <a-button type="primary" class="add-icon" :style="{top:beforeNode.getNodeType()==FlowNodeType.ROUTE?'60%':'50%'}" shape="circle">
                <icon-plus />
            </a-button>
            <template #content>
                <div class="select-flow-node">
                    <p class="node-select-title">请选择流程节点</p>
                    <div class="node-list">
                        <p
                            class="node-item"
                            v-for="(item, index) in nodeList"
                            :key="item.type"
                            @click="addNodeFunc(item)"
                        >
                            <img :src="item.icon" alt="" />
                            {{ item.title }}
                        </p>
                    </div>
                </div>
            </template>
        </a-trigger>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, defineEmits, inject, defineProps } from 'vue'
import type { Ref, Component, PropType } from 'vue'
import { FlowNodeType, FlowRouteNodeType } from '../../types/index'
import BaseFlowNode from '../../class/BaseFlowNode'
import StartNode from '../../class/flow-nodes/StartNode'
import RouteNode from '../../class/flow-nodes/RouteNode'
import TolerateNode from '../../class/flow-nodes/TolerateNode'
import SonFlowNode from '../../class/flow-nodes/SonFlowNode'
import ParallelNode from '../../class/flow-nodes/ParallelNode'
import ExclusiveNode from '../../class/flow-nodes/ExclusiveNode'
import ApprovalNode from '../../class/flow-nodes/ApprovalNode'
import CopyNode from '../../class/flow-nodes/CopyNode'
import TransactorNode from '../../class/flow-nodes/TransactorNode'
import TriggerNode from '../../class/flow-nodes/TriggerNode'
import DelayNode from '../../class/flow-nodes/DelayNode'
import brfznextPng from '../../assets/imgs/brfznext.png'
import branchPng from '../../assets/imgs/branch.png'
import bxPng from '../../assets/imgs/bx.png'
import csrPng from '../../assets/imgs/csr.png'
import hcPng from '../../assets/imgs/hc.png'
import spPng from '../../assets/imgs/sp.png'
import brPng from '../../assets/imgs/br.png'
import sonPng from '../../assets/imgs/son.png'
import blrPng from '../../assets/imgs/blr.png'
import cfqPng from '../../assets/imgs/cfq.png'
import delayPng from '../../assets/imgs/delay.png'


let props = defineProps({
    beforeNode: {
        type: Object as PropType<BaseFlowNode>,
        default: () => {
            return {}
        }
    }
})
let emits = defineEmits(['addNode'])

const addNode = inject('addNode') as any

type nodeListItemType = {
    type: FlowNodeType
    icon: string
    title: string
}


let nodeList: Ref<Array<nodeListItemType>> = ref([
    {
        type: FlowNodeType.APPROVAL,
        icon: spPng,
        title: '审批人'
    },
    {
        type: FlowNodeType.EXCLUSIVE,
        icon: hcPng,
        title: '互斥分支'
    },
    {
        type: FlowNodeType.PARALLEL,
        icon: bxPng,
        title: '并行分支'
    },
    {
        type: FlowNodeType.TRIGGER,
        icon: cfqPng,
        title: '触发器'
    },
    {
        type: FlowNodeType.SONFLOW,
        icon: sonPng,
        title: '子流程'
    },
    {
        type: FlowNodeType.TRANSACTOR,
        icon: blrPng,
        title: '办理人'
    },
    {
        type: FlowNodeType.TOLERATE,
        icon: brPng,
        title: '包容分支'
    },
    {
        type: FlowNodeType.DELAY,
        icon: delayPng,
        title: '延时等待'
    },
    {
        type: FlowNodeType.COPY,
        icon: csrPng,
        title: '抄送人'
    }
])

function addNodeFunc(nodeItem: nodeListItemType) {
    let node: BaseFlowNode = {} as BaseFlowNode
    switch (nodeItem.type) {
        case FlowNodeType.APPROVAL:
            node = new ApprovalNode()
            break
        case FlowNodeType.EXCLUSIVE:
            node = new RouteNode(FlowRouteNodeType.EXCLUSIVE, [
                [new ExclusiveNode()],
                [new ExclusiveNode()]
            ])
            break
        case FlowNodeType.SONFLOW:
            node = new SonFlowNode()
            break
        case FlowNodeType.PARALLEL:
            node = new RouteNode(FlowRouteNodeType.PARALLEL, [
                [new ParallelNode()],
                [new ParallelNode()]
            ])
            break
        case FlowNodeType.TRANSACTOR:
            node = new TransactorNode()
            break
        case FlowNodeType.TOLERATE:
            node = new RouteNode(FlowRouteNodeType.TOLERATE, [
                [new TolerateNode()],
                [new TolerateNode()]
            ])
            break
        case FlowNodeType.TRIGGER:
            node = new TriggerNode()
            break
        case FlowNodeType.DELAY:
            node = new DelayNode()
            break
        case FlowNodeType.COPY:
            node = new CopyNode()
            break
    }
    addNode(props.beforeNode, node)
}
</script>
<style scoped lang="less">
@import url('../../styles/index.less');

.next-arrow-add {
    width: @node-width;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: @node-line-len;
    margin-bottom: 8px;
    &:before {
        position: absolute;
        content: '';
        width: @node-line-width;
        height: @node-line-len;
        background: @node-line-color;
    }

    &:after {
        content: '';
        position: absolute;
        top: @node-line-len;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        border-style: solid;
        border-width: 8px 6px 4px;
        border-color: @node-line-color transparent transparent;
    }
}

.next-branch-icon{
  position: absolute;
  top: -20px;
  background-color: white;
  padding: 5px;
  border-radius: 50%;

  img{
    width: 30px;
    height: 30px;
  }
}

.select-flow-node {
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    max-width: 550px;
}
.node-select-title {
    font-size: 16px;
    margin-bottom: 12px;
}
.node-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.node-item {
    display: flex;
    width:122px;
    align-items: center;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 15px;
    background: #f8f9f9;
    margin: 5px;
    // width: 110px;
    img {
        width: 25px;
        height: 25px;
        margin-right: 10px;
    }
}
.add-icon{
  position: absolute;
  top: 50%;  // 将 top 设置为 50%

  transform: translateY(-50%);  // 使用 transform 来实现水平和垂直居中

}
</style>
